<template>
	<!-- 画布 -->
	<view class="cs-draw-x">
		<view class="cs-draw-util">
			<view class="cs-util-li" v-for="(item, index) in iconArr" :key='index'>
				<text :class="['iconfont ', item.icon, ' icon_opertion']" @click='clickUtil(item.title)'></text>
			</view>
		</view>
		
		<view class="cs-draw-canvas-x">
			<canvas canvas-id="canvas-id" class="cs-draw-canvas"
			@touchstart="start"
			@touchmove="move"
			@touchend="end"
			disable-scroll='true'
			></canvas>
		</view>
	</view>
</template>

<script>
	let xyArr = [] // 点击时的xy坐标 和 移动时的xy坐标
	import api from '@/common/group-http/notehttp.js'
	export default {
		props: {
			isHistoryDraft: Boolean ,// 草稿历史
		},
		data() {
			return {
				iconArr: [
					{title: 'close', icon: 'iconguanbi'},
					{title: 'del', icon: 'iconshanchu'},
					// {title: 'back', icon: 'iconshangyibu'},
					// {title: 'go', icon: 'iconxiayibu'},
					{title: 'save', icon: 'iconduigou'}
				],
				canvas_w: 0, // 手机设备的宽度
				canvas_h: 0, // 手机设备的高度
			}
		},
		methods: {
			// 工具条事件
			clickUtil(title) {
				switch(title) {
					case 'close': // 关闭
						this.$emit('clickDraw', title) // 将工具条事件告诉父组件
					break;
					case 'del': // 清空画布
						this.clear()
					break;
					case 'back':// 撤销
					break;
					case 'go': // 前进
					break;
					case 'save': // 保存
						uni.showLoading({
							title: '保存中...',
						})
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: this.canvas_w,
							height: this.canvas_h,
							destWidth: this.canvas_w,
							destHeight: this.canvas_h,
							canvasId: 'canvas-id',
							success:res => {
								// 需要把临时路径转成base64以便后续可以访问到。
								const path = plus.io.convertLocalFileSystemURL(res.tempFilePath) //绝对路径
								const fileReader = new plus.io.FileReader()
								fileReader.readAsDataURL(path)
								fileReader.onloadend = (res) => { //读取文件成功完成的回调函数
									uni.setStorageSync('imgbase', res.target.result)
									this.$emit('clickDraw', title) // 将工具条点击事件告诉父组件进行关闭画布
									uni.hideLoading()
								}
							},
						},this)
					break;
				}
			},
			
			// 画布事件
			// 开始
			start(event) {
				this.context.setLineWidth(5) // 线宽度，每次点击重新设置一下宽度，否则会变细
				// 获取起点位置
				xyArr.push({
					move_x: event.touches[0].x,
					move_y: event.touches[0].y
				})
			},
			// 移动
			move(event) { 
				// 获取移动位置/
				xyArr.push({
					move_x: event.touches[0].x,
					move_y: event.touches[0].y
				})
				// 确保有起点坐标 和 线坐标
				if (xyArr.length >= 2) {
					this.drawing()
				}
			},
			// 触摸结束
			end(event) {
				// 清空上一次的起点
				xyArr = []
			},
			// 进行绘制
			drawing() {
				this.context.moveTo(xyArr[0].move_x, xyArr[0].move_y) // 创建起点 参数1 / 2 表示起点从left:10 从top:10 来作为起点
				this.context.lineTo(xyArr[1].move_x, xyArr[1].move_y) // 创建线条 参数1 表示线条的宽度 参数2表示 距离top顶部位置
				this.context.stroke() // 开始将上面的线进行填充
				this.context.draw(true) // true表示连接上一次的内容，false则不会
				xyArr.shift() // 每次画完将上一次的轨道进行清空，避免累加
			},
			// 清除画布内容
			clear() {
				this.context.clearRect(0, 0, this.canvas_w, this.canvas_h)
				this.context.draw()
			},
			
		},
		mounted() {
			// 实例化画布
			this.context = uni.createCanvasContext('canvas-id', this)
			this.context.setFillStyle('#000') // 设置线颜色
			this.context.setLineWidth(5) // 线宽度
			this.context.setLineCap('round') // 设置线两端端点样式更加圆润
			this.context.setLineJoin('round') // 设置两条线连接处更加圆润
			let _this = this
			// 获取系统设备信息的宽度和高度 后续可用到如清空画布等
			uni.getSystemInfo({
				success(res) {
					_this.canvas_w = res.windowWidth
					_this.canvas_h = res.windowHeight
				}
			})
			let reg = /[.]png/g
			// 延迟200毫秒显示，否则会出现偶尔显示不出来
			if (uni.getStorageSync('imgbase') && !reg.test(uni.getStorageSync('imgbase'))) {
				setTimeout(() => {
					this.context.drawImage(uni.getStorageSync('imgbase'),0,0,this.canvas_w,this.canvas_h) // 将草稿图挂上去
					this.context.draw()
				},200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 工具条
	.cs-draw-util{
		position: fixed;
		display: flex;
		height: 88upx;
		padding: 0 60upx;
		left: 0; right:0;
		z-index: 2;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx solid #E5E5E5;
		background: #FFFFFF;
	}
	/* #ifdef APP-PLUS || MP-WEIXIN */
	.cs-draw-util{
		top: 0;
	}
	/* #endif */
	
	/* #ifdef H5 */
	.cs-draw-util{
		top: 86upx;
	}
	/* #endif */
	
	// 画布样式
	.cs-draw-canvas-x{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
		top: 0;
		background: #FFFFFF;
	}
	.cs-draw-canvas{
		width: 100%;height: 100%;
	}
	
	// 图标
	.icon_opertion{
		font-size: 40upx;
		color: #666666;
	}
</style>
